<div id="luna_root_div">
</div>
<div id="luna_extra_html_div">
</div>
<div class="overlay" id="overlay"></div>
<script>

    const rootdivid = 'luna_root_div';
    const extra_html_divid = "luna_extra_html_div";
</script>
<style>
    .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        display: block;
    }

    body {
        overflow: auto;
        margin-top: 0;
        margin-bottom: 0;
        /* word-break: break-all; */
    }

    body::-webkit-scrollbar {
        display: none;
    }

    rt {
        user-select: none;
    }
</style>

<script>document.addEventListener('DOMContentLoaded', () => {
        //https://github.com/MicrosoftEdge/WebView2Feedback/blob/main/specs/WebMessageObjects.md

        // 阻止浏览器默认行为
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            document.body.addEventListener(eventName, (e) => {
                e.preventDefault();
                e.stopPropagation();
            }, false);
        });
        document.body.addEventListener('drop', (e) => { chrome.webview.postMessageWithAdditionalObjects("FilesDropped", e.dataTransfer.files); }, false);

    });
</script>
<script>
    //nativte api
    function safe_calllunaheightchange(h) {
        let _call = window.calllunaheightchange;
        if (!_call)
            _call = console.log;
        _call(h)
    }
    function safe_calllunaclickedword(word) {
        let _call = window.calllunaclickedword;
        if (!_call)
            _call = console.log;
        _call(word)
    }
</script>
<script>
    function _simpleuid() {
        return 'luna' + Math.random().toString(36).substr(2, 9);
    }
    function commoninit_font_align_height(ele, args) {
        //字体使用pt，高度/距离使用px
        if (args.lineHeight > 0)
            ele.style.lineHeight = args.lineHeight + 'px'
        ele.style.fontFamily = args.fontFamily
        ele.style.fontSize = args.fontSize + 'pt'
        ele.style.fontWeight = args.bold ? "bold" : ""
        ele.style.textAlign = args.atcenter ? "center" : ""
    }
    function maybesethtml(ele, args, text) {
        if (args.userawhtml)
            ele.innerHTML = text
        else
            ele.innerText = text
    }
    function normal_create_internal(styleargs, text, args) {
        let ele = document.createElement('div')
        maybesethtml(ele, args, text)
        ele.style.color = args.color
        commoninit_font_align_height(ele, args)
        return ele
    }
    function yinying_create_internal(styleargs, text, args) {
        let ele = document.createElement('div')
        maybesethtml(ele, args, text)
        ele.style.color = styleargs.fillcolor
        commoninit_font_align_height(ele, args)

        let ntimes = ""
        for (let i = 0; i < styleargs.shadowforce; i++) {
            ntimes += `0px 0px ${args.fontSize * styleargs.shadowR + styleargs.shadowR_ex}px ${args.color}`
            if (i == styleargs.shadowforce - 1)
                ntimes += ";"
            else
                ntimes += ","
        }
        let _id = _simpleuid()
        ele.id = _id
        let style = document.createElement('style')
        style.innerText = `#${_id}{text-shadow:${ntimes}}`
        ele.appendChild(style)
        return ele
    }
    function miaobian0_create_internal(styleargs, text, args) {

        let ele = document.createElement('div')
        maybesethtml(ele, args, text)
        ele.style.color = styleargs.fillcolor
        commoninit_font_align_height(ele, args)
        let _id = _simpleuid()
        ele.id = _id
        let style = document.createElement('style')
        style.innerText = `#${_id}{-webkit-text-stroke: ${styleargs.width}px ${args.color};}`
        ele.appendChild(style)
        return ele
    }
    function miaobian12_common(styleargs, text, args) {
        let c2 = args.color
        let c1 = styleargs.fillcolor
        if (styleargs.reverse) {
            c2 = styleargs.fillcolor
            c1 = args.color
        }
        let ele = document.createElement('div')
        let _id = _simpleuid()
        ele.id = _id
        commoninit_font_align_height(ele, args)
        let style = document.createElement('style')
        style.innerHTML = `
         #${_id}{
    display: grid;
    }
        #${_id} div{ 
  margin: 0;
  grid-column: 1;
  grid-row: 1;
        }
  #${_id} .nostroken {
    color: ${c2};
    z-index: 2;
  }`
        for (let i = 0; i < 1 + styleargs.trace * 10; i++) {
            style.innerHTML += `#${_id} .stroken${i}{
    color: ${c1};
    -webkit-text-stroke: ${args.fontSize * styleargs.width_rate + styleargs.width}px ${c1};
    position: relative;
  z-index: 1;
  left: ${(i + 1) / 10}px;
  top: ${(i + 1) / 10}px;
  user-select: none;
  }`
        }
        ele.appendChild(style)
        let p = document.createElement('div')
        maybesethtml(p, args, text)
        p.classList.add('nostroken')
        ele.appendChild(p)

        for (let i = 0; i < 1 + styleargs.trace * 10; i++) {
            let p = document.createElement('div')
            maybesethtml(p, args, text)
            p.classList.add(`stroken${i}`)
            ele.appendChild(p)
        }
        return ele

    }
    regist_style_imp = {
        normal: normal_create_internal,
        yinying: yinying_create_internal,
        miaobian0: miaobian0_create_internal,
        miaobian1: miaobian12_common,
    }
    function dispatch_text_style_line(style, styleargs, text, args) {
        let ele = regist_style_imp[style](styleargs, text, args);
        if (args.userawhtml) {
            if (args.atcenter) {
                let wrap = document.createElement('div')
                wrap.style.textAlign = "center"
                wrap.appendChild(ele)
                return wrap
            }
            return ele
        }
        let wrap = document.createElement('div')
        wrap.style.whiteSpace = 'pre-wrap'
        wrap.appendChild(ele)
        if (args.atcenter) {
            wrap.style.textAlign = "center"
        }
        return wrap
    }
    function dispatch_text_style_inlineblock(style, styleargs, text, args) {
        let l = dispatch_text_style_line(style, styleargs, text, args)
        let div = document.createElement('div')
        div.style.display = 'inline-block'
        div.appendChild(l)
        return div
    }
    function addnameblock(style, styleargs, index, name, text, args) {
        if (index == 0 && name.length) {
            let userawhtml = args.userawhtml
            args.userawhtml = false
            let div = dispatch_text_style_line(style, styleargs, name + " ", args)
            let divx = document.createElement('div')
            divx.classList.add('lunatranslator_translator_name')
            divx.appendChild(div)
            args.userawhtml = userawhtml
            let div2 = document.createElement('div')
            div2.appendChild(divx)
            let textdiv = dispatch_text_style_inlineblock(style, styleargs, text, args)
            div2.appendChild(textdiv)
            if (args.atcenter) {
                div2.style.textAlign = "center"
            }
            return div2
        }
        return dispatch_text_style_line(style, styleargs, text, args)
    }
    function dispatch_text_style(style, styleargs, name, text, args) {
        if (!text.includes('\n'))
            return addnameblock(style, styleargs, 0, name, text, args)
        let lines = text.split('\n')
        let wrap = document.createElement('div')
        lines.forEach((line, index) => {
            wrap.appendChild(addnameblock(style, styleargs, index, name, line, args))
        })
        return wrap
    }
</script>
<style id="maybeshowerror">
</style>
<style id="maybeshoworigin">
</style>
<style id="maybeshowtranslate">
</style>
<style id="maybeshowtranslatorname">
</style>
<script>
    function _showhidetranslatorname(show) {
        let css = ['.lunatranslator_translator_name{   display: none;    }', '.lunatranslator_translator_name{   display: inline-block;    }'][show]
        document.getElementById('maybeshowtranslatorname').innerHTML = css;
        safe_calllunaheightchange(document.getElementById(rootdivid).offsetHeight)
    }
    function _showhidetranslate(show) {
        let css = ['.lunatranslator_translate{   display: none;    }', '.lunatranslator_translate{   display: block;    }'][show]
        document.getElementById('maybeshowtranslate').innerHTML = css;
        safe_calllunaheightchange(document.getElementById(rootdivid).offsetHeight)
    }
    function _showhideerror(show) {
        let css = ['.lunatranslator_error{   display: none;    }', '.lunatranslator_error{   display: block;    }'][show]
        document.getElementById('maybeshowerror').innerHTML = css;
        safe_calllunaheightchange(document.getElementById(rootdivid).offsetHeight)
    }
    function _showhideorigin(show) {
        let css = ['.lunatranslator_origin{   display: none;    }', '.lunatranslator_origin{   display: block;    }'][show]
        document.getElementById('maybeshoworigin').innerHTML = css;
        safe_calllunaheightchange(document.getElementById(rootdivid).offsetHeight)
    }
    function _create_div_line_id(_id, texttype) {
        let div = document.createElement("div");
        div.id = _id;
        if (texttype == 0) {
            div.classList.add('lunatranslator_origin')
        }
        else if (texttype == 1) {
            div.classList.add('lunatranslator_translate')
        }
        else if (texttype == 2) {
             
        }
        else if (texttype == 3) {
            div.classList.add('lunatranslator_error')
        }
        else if (texttype == 4) {
            div.classList.add('lunatranslator_translate')
            let divx=document.createElement('div')
            divx.classList.add('lunatranslator_error')
            divx.appendChild(div)
            div=divx
        }
        document.getElementById(rootdivid).appendChild(div);
    }
    function _create_internal_text(style, styleargsjson, _id, nameu, textu, argsjson) {
        let ele = document.getElementById(_id)
        ele.innerHTML = ''
        let args = JSON.parse(decodeURIComponent(argsjson))
        let styleargs = JSON.parse(decodeURIComponent(styleargsjson))
        let name = decodeURIComponent(nameu)
        let text = decodeURIComponent(textu)
        let innerele = dispatch_text_style(style, styleargs, name, text, args)
        ele.appendChild(innerele)
        safe_calllunaheightchange(document.getElementById(rootdivid).offsetHeight)
    }
    function _splittags(tag) {
        let result = [];
        let currentSubArray = [];

        tag.forEach(item => {
            if (item.orig === "\n") {
                if (currentSubArray.length > 0) {
                    result.push(currentSubArray);
                }
                currentSubArray = [];
            } else {
                currentSubArray.push(item);
            }
        });

        if (currentSubArray.length > 0) {
            result.push(currentSubArray);
        }

        return result
    }
    function _create_internal_rubytext(style, styleargsjson, _id, tagjson, argsjson) {

        let args = JSON.parse(decodeURIComponent(argsjson))
        let styleargs = JSON.parse(decodeURIComponent(styleargsjson))
        let tag = JSON.parse(decodeURIComponent(tagjson))
        let atcenter = args.atcenter
        let fmori = args.fmori
        let fsori = args.fsori
        let boldori = args.boldori
        let color = args.color
        let fmkana = args.fmkana
        let fskana = args.fskana
        let boldkana = args.boldkana
        let kanacolor = args.kanacolor
        let isshowhira = args.isshowhira
        let isshow_fenci = args.isshow_fenci
        let isfenciclick = args.isfenciclick
        let line_height = args.line_height
        let ele = document.getElementById(_id)
        if (atcenter)
            ele.style.textAlign = "center"
        let tags = _splittags(tag)
        tags.forEach(tag => {
            let mayberuby = []
            tag.forEach(word => {
                let eleori = dispatch_text_style_inlineblock(style, styleargs, word.orig, { atcenter: true, fontFamily: fmori, fontSize: fsori, bold: boldori, color: color, lineHeight: line_height })

                if ((isshow_fenci || isfenciclick) && word.hira.trim().length) {
                    let div = document.createElement('div')
                    div.style.display = 'inline-block'
                    div.id = _simpleuid()
                    let style = document.createElement('style')
                    if (isshow_fenci)
                        style.innerHTML += `#${div.id} {
  background-color: ${word.color};
}`
                    if (isfenciclick) {
                        div.setAttribute('word', JSON.stringify(word))
                        div.addEventListener('click', function (e) {
                            safe_calllunaclickedword(JSON.parse(this.getAttribute('word')))
                        })

                        style.innerHTML += `#${div.id} {
  z-index: 2000;position: relative;
}
  #${div.id}:hover {
  background-color: rgba(0,0,0,0.5);  
}`

                    }
                    div.appendChild(style)
                    div.appendChild(eleori)

                    mayberuby.push(div)
                } else {
                    mayberuby.push(eleori)
                }
                if (isshowhira) {
                    let rt = document.createElement('rt')

                    if ((word.orig != word.hira)) {
                        rt.appendChild(dispatch_text_style_inlineblock(style, styleargs, word.hira, { atcenter: true, fontFamily: fmkana, fontSize: fskana, bold: boldkana, color: kanacolor, lineHeight: 0 }))

                    }
                    mayberuby.push(rt)
                }
            })
            let div = document.createElement('div')
            if (isshowhira) {

                let ruby = document.createElement('ruby')
                mayberuby.forEach(e => {
                    ruby.appendChild(e)
                });
                div.appendChild(ruby)
                ele.appendChild(div)
            }
            else {

                mayberuby.forEach(e => {
                    div.appendChild(e)
                });
            }
            ele.appendChild(div)
        })
        safe_calllunaheightchange(document.getElementById(rootdivid).offsetHeight)

    }
    function _clear_all() {
        document.getElementById(rootdivid).innerHTML = "";
    }
    function _runScript(script) {
        let newScript = document.createElement('script');
        newScript.innerHTML = script.innerHTML;
        let src = script.getAttribute('src');
        if (src) newScript.setAttribute('src', src);
        document.head.appendChild(newScript);
        document.head.removeChild(newScript);
    }

    function _setHTMLWithScript(container, rawHTML) {
        container.innerHTML = rawHTML;
        let scripts = container.querySelectorAll('script');
        for (let script of scripts) {
            _runScript(script);
        }
    }
    function _set_extra_html(htmlx) {
        _setHTMLWithScript(document.getElementById(extra_html_divid), decodeURIComponent(htmlx))

    }
    function _setselectable(b) {
        document.getElementById(rootdivid).style.userSelect = b ? 'text' : 'none';
        document.getElementById('overlay').style.display = b ? 'none' : 'block';
    }
</script>
<script>
    //api
    setselectable = _setselectable
    showhideerror = _showhideerror
    showhideorigin = _showhideorigin
    showhidetranslate = _showhidetranslate
    showhidetranslatorname = _showhidetranslatorname
    create_div_line_id = _create_div_line_id;
    create_internal_text = _create_internal_text;
    create_internal_rubytext = _create_internal_rubytext;
    clear_all = _clear_all
    set_extra_html = _set_extra_html
</script>

<script>
</script>